import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

import { Row, Col } from "@preact/grid";
import { TextInput, ColorInput, DropDown, NumberInput } from "@preact/base/input"; 
import { TEXT_STYLE_MAP } from "@charm:data/model/constant/text";
import DROP_DOWN_MAPS from "@charm:data/model/constant/droplist";
import { LAYOUT_POSITION } from "@charm:data/model/constant/basic";
import { createTextStyle } from "@charm:data/business/editor";
import {
    COMMON_DATA_TYPE
} from '@charm:data/model/constant/basic';
import { envoke } from "@store";

const { 
    number,
    text,
    color,
    rect,
    dropdown 
} = COMMON_DATA_TYPE;

const Rect = ({ data, uuid }) => {

    return <Row className="c-properties-rect-item" style={{
        flexDirection: "column",
        flexFlow: "wrap"
    }}>
            {
                data.map((value, index) => {
                    return <Col cols={12} style={{paddingBottom: 8}}>
                        <Row>
                            <Col className="c-label" cols={8}>{LAYOUT_POSITION[index]}</Col>
                            <Col cols={16}>
                                <TextInput value={value} onFinished={v => {
                                    data[index] = v;
                                    envoke(uuid, 'setOption', {});
                                }} />
                            </Col>
                        </Row>
                    </Col>
                })
            }
        </Row>

};

export default ({ data, uuid }) => {
    const { textStyle = createTextStyle() } = data;
    const keys = Object.keys(textStyle);
    return <div className="c-array-panel">
        {keys.map(k => {
            const { label, type, prop } = TEXT_STYLE_MAP[k];
            const value = textStyle[prop];
            console.log('DROP_DOWN_MAPS => ', DROP_DOWN_MAPS, DROP_DOWN_MAPS[prop]);
            return <Row style={{paddingTop: 8}}>
                <Col cols={8}>
                    {label}
                </Col>
                <Col cols={16}>
                    {type === text ? 
                        <TextInput value={value} onFinished={value => {
                            textStyle[key] = value;
                            data.textStyle = textStyle;
                            envoke(uuid, 'setOption', {});
                        }} /> : ""
                    }
                    {type === number ? 
                        <NumberInput value={value} onFinished={value => {
                            textStyle[key] = value;
                            data.textStyle = textStyle;
                            envoke(uuid, 'setOption', {});
                        }} /> : ""
                    }
                    {type === color ? 
                        <ColorInput color={value} onChange={value => {
                            textStyle[key] = value;
                            data.textStyle = textStyle;
                            envoke(uuid, 'setOption', {});
                        }} /> : ""
                    }
                    {type === dropdown ? 
                        <DropDown lists={DROP_DOWN_MAPS[prop]} /> : ""
                    }
                    {type === rect ? 
                        <Rect data={value} uuid={uuid} /> : ""
                    }
                </Col>
            </Row>
        })}
    </div>
}